<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->


<dom-module id="shop-my-coupons">
    <template>
        <style include="shop-common-styles">
            paper-item:first-of-type{
                border-top: #ccc dotted 1px;
            }
            paper-item{
                border-bottom: #ccc dotted 1px;
            }
            paper-item paper-button{
                color: #fff;
                background-color: #003366;
                margin: 0px;
                min-height: auto;
                font-size: 12px;
                display: none;
            }
            paper-item.iron-selected paper-button{
                display:flex;
            }
            paper-item-body div[secondary]{
                font-size: 12px;
            }
            paper-listbox a{
                color: #000;
                text-decoration: none;
            }
        </style>
        <plugin-message id="msg"></plugin-message>
        <plugin-xhr id="my_coupon_list_available" url="[[app.apiHost]]/my.coupon.list.available" response="{{coupons}}"></plugin-xhr>
        <plugin-xhr id="my_coupon_delete" url="[[app.apiHost]]/my.coupon.delete"></plugin-xhr>
        <template is="dom-if" if="[[coupons]]">
            <header>
                <h1>我的优惠卷</h1>
                <span hidden="[[isEmpty]]">总计：[[coupons.result.length]]张</span>
                <span hidden="[[!isEmpty]]">您当前没有任何可用的优惠卷</span>
            </header>
        </template>
        
        <paper-listbox>
            <template is="dom-repeat" items="[[coupons.result]]" as="coupon">
                <paper-item>
                    <paper-item-body two-line>
                        <div>[[coupon.coupon_snaphot.money]]元优惠卷</div>
                        <div secondary>使用条件：[[_displayTerms(coupon.coupon_snaphot)]]</div>
                    </paper-item-body>
                    <paper-button on-click="_delete">丢弃</paper-button>
                </paper-item>
            </template>
        </paper-listbox>
    </template>

    <script>
        class ShopMyCoupons extends PluginElement {

            static get is() {
                return 'shop-my-coupons';
            }

            static get properties() {
                return {
                    visible: {
                        type: Boolean,
                        observer: '_visibleChanged'
                    },
                    isEmpty:{
                        type:Boolean,
                        value:true
                    },
                    coupons:{
                        type:Object,
                        observer:"_couponsChanged"
                    }
                }
            }
            ready(){
                super.ready();
                let dom = this;
                app.addEventListener("reload",function(e){
                    if(app.page=="my-coupons"){
                        dom._visibleChanged(true);
                    }
                });
            }
            _visibleChanged(visible) {
                this.$.my_coupon_list_available.param("app_id",app.appId).get();
            }
            _displayTerms(conpon){
                return (conpon.terms=="order-money"?"总额满":"商品数量满")+conpon.quantity
            }
            _delete(e){
                let dom = this;
                this.$.msg._confirm("是否确认删除此优惠卷？",function(){
                    dom.$.my_coupon_delete.param("record_id",e.model.coupon.id).callback(function(){
                        dom.splice("coupons.result",dom.coupons.result.indexOf(e.model.coupon),1);
                    }).get();
                });
                
            }
            _couponsChanged(coupons){
                if(coupons){
                   if(coupons.result.length>0){
                       this.isEmpty = false;
                   }
                }
            }
        }

        customElements.define(ShopMyCoupons.is, ShopMyCoupons);

    </script>

</dom-module>
